<template>
  <div class="wallpaper">
    <div
      v-if="$root.config.background.type == 'image'"
      class="image"
      :style="{
        backgroundImage: `url('${$root.config.background.url}')`
      }"
    ></div>
    <div
      v-else-if="$root.config.background.type == 'color'"
      class="color"
      :style="{
        backgroundImage: `${$root.config.background.url}`
      }"
    ></div>
    <div
      v-else-if="$root.config.background.type == 'video'"
      class="color"
      :style="{
        backgroundColor: `url('${$root.config.background.url}')`
      }"
    ></div>
  </div>
</template>

<script>
export default {
  name: 'wallpaper'
}
</script>

<style lang="scss" scoped>
.wallpaper {
  width: 100vw;
  height: 100vh;
  background-size: cover;
  background-position: center;
  .image, .color {
    width: 100vw;
    height: 100vh;
    background-size: cover;
    background-position: center;
  }
}
</style>
